<html>
<head>
  {include file='common@base/meta'}
  <style>
  </style>
</head>
<body class="hold-transition">
<section class="content" id="content">
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <label>部门
        {:form_dropdown('filter[department_id]',$deptSelect,0,
        'class="form-control js-department_select" ')}</label>
    </div>
    <div class="col-xs-12 col-sm-4">
      <label>快速查找<input class="form-control js-search-username" placeholder="请输入姓名或者工号"></label>
    </div>
    <div class="col-xs-12 col-sm-4">
      <button type="button" class="btn btn-default js-show-checked">查看已选</button>
      <button type="button" class="btn btn-default js-all-checked">全部选中</button>
    </div>
  </div>
  <p></p>
  {foreach $data as $dept_id=>$vo}
  <div class="box box-primary" data-dept="{$dept_id}" data-dept-parent="{:$dept_all[$dept_id]['parent_id']}">
    <div class="box-header with-border">
      <h5 class="box-title">{$dept_all[$dept_id]['title']}</h5>
      <div class="box-tools pull-right">
        <button type="button" class="btn btn-xs btn-success js-dept-checked">全部选中</button>
        <label class="label label-info">已选：<span class="js-user-count">0</span> / <span
          class="js-user-total">0</span></label>
      </div>

    </div>
    <div class="box-body checkbox users">
      <ul class="list-inline" style="width:100%">
        {foreach $vo as $uid=>$u}
        <li style="min-width: 30%;">
          <label>{:form_checkbox('',$uid,false,'class="user_select"')}
            <span class="userinfo"><span class="username">{$u['realname']}</span>
                  <span class="userno"></span></span>
          </label>
        </li>
        {/foreach}
      </ul>
    </div>
  </div>

  {/foreach}
</section>
</body>
{include file='common@base/footer-js'}
<script>

  $(function () {


    var $users = $(".users"), total = 0;

    $users.each(function (i, obj) {
      console.log('count');
      count_users($(obj));
    });

    function count_users(obj) {
      var dept_objs = obj.find(".user_select:checked");
      total = $(".user_select:checked").length;
      obj.prev(".heading").find(".js-user-count").text(dept_objs.length);
      $(".js-user-total").text(total);
      return dept_objs.length;
    }

    $(".user_select").on("change", function () {
      var me = $(this), dept_objs = me.parents(".users").find(".user_select:checked"),
        objs = $(".user_select:checked"), length = count_users(me.parents(".users"));
      console.log(length);
    });
    $(".js-all-checked").on("click", function () {
      var me = $(this), users = $(".users"), checkboxes = users.find("input:checkbox:visible");
      if (me.text() == '全部选中') {
        checkboxes.prop("checked", true);
        me.text('全部取消');
      } else {
        checkboxes.prop("checked", false);
        me.text('全部选中');
      }
      users.each(function (i, obj) {
        count_users($(obj));
      });

    });
    $(".js-dept-checked").on("click", function () {
      var me = $(this), heading = me.parents(".box-header with-border"),
        users = heading.next(".users"),
        checkboxes = users.find("input:checkbox:visible");
      if (me.text() == '全部选中') {
        checkboxes.prop("checked", true);
        me.text('全部取消');
      } else {
        checkboxes.prop("checked", false);
        me.text('全部选中');
      }
      count_users(users);
    });

    /**
     * 查看已选
     */
    $(".js-show-checked").on("click", function () {
      var me = $(this), boxes = $(".box")
        , checkboxes = boxes.find("input:checkbox")
        , checked = boxes.find("input:checked")
      ;

      if (me.text() == "查看已选") {
        checkboxes.parents("li").addClass("hide");
        checked.parents("li").removeClass("hide");
        boxes.each(function (i, obj) {
          if ($(obj).find("input:checked").length == 0) {
            $(obj).addClass("hide");
          }
        });
        me.text("查看所有");
      } else {
        checkboxes.parents("li").removeClass("hide");
        dept_select($(".js-department_select"));
        me.text("查看已选");
      }
    });

    $("body").on("change", ".js-department_select", function () {
      dept_select($(this));
    });

    function dept_select(obj) {
      var me = obj,
        boxes = $(".box"),
        dept_id = me.val(),
        selected = $("div[data-dept='" + dept_id + "']"),
        selected_parent = $("div[data-dept-parent='" + dept_id + "']");
      console.log(dept_id);
      if (dept_id > 1) {
        boxes.addClass("hide");
        //headings.next(".users").addClass("hide");
        selected.removeClass("hide");
        selected_parent.removeClass("hide");
      } else {
        boxes.removeClass("hide");
      }
    }

    $(".js-search-username").on("keyup", function () {
      var users = $(".users")
        , box = $(".box")
        , lis = users.find("li")
        , me = $(this)
        , text = me.val().trim()
        , selected = users.find("li:contains('" + text + "')")
      ;
      console.log(text);
      if (text.length == 0) {
        lis.removeClass("hide");
        dept_select($(".js-department_select"));
      } else {
        lis.addClass("hide");
        selected.removeClass("hide");
        box.addClass("hide");
        selected.each(function (i, obj) {
          $(obj).parents(".box").removeClass("hide");
        });
      }
    });
  });
</script>
</body>
</html>
